<template>
    <div style="width: 224px">
        <div class="header-title">
            <div class="panel-big-title" style="margin-bottom: 0">土</div>
            <div class="tabs-box">
                <TabBtnGroup v-model="selectTab" :tab-list="tabs" />
            </div>
        </div>
        <BasePanel width="100%" height="260px">
            <template #title>
                <div @click.stop>
                    <ElSelect
                        class="el-select-no-border"
                        style="width: 68px"
                        v-model="selectYear"
                        :suffixIcon="ArrowDownBold"
                    >
                        <ElOption
                            v-for="item in config.yearSelectList"
                            :key="item"
                            :value="item"
                            :label="item"
                        />
                    </ElSelect>
                </div>
            </template>
            <template #default>
                <div class="panel-content">
                    <div class="label">受污染耕地</div>
                    <div class="info-box">
                        <div class="value-box">
                            <span class="value">{{ panelData.v1 }}</span>
                            <span class="unit">{{ panelData.v1Unit }}</span>
                        </div>
                        <div class="value-box-2">
                            <span class="title">目标</span>
                            <span class="value">
                                {{ panelData.v1Target }}{{ panelData.v1Unit }}
                            </span>
                        </div>
                    </div>
                    <div class="label">污染地块</div>
                    <div class="info-box">
                        <div class="value-box">
                            <span class="value">{{ panelData.v2 }}</span>
                            <span class="unit">{{ panelData.v2Unit }}</span>
                        </div>
                        <div class="value-box-2">
                            <span class="title">目标</span>
                            <span class="value">
                                {{ panelData.v2Target }}{{ panelData.v2Unit }}
                            </span>
                        </div>
                    </div>
                </div>
            </template>
        </BasePanel>
    </div>
</template>

<script setup lang="ts">
import TabBtnGroup from '@/components/TabBtnGroup/index.vue'
import BasePanel from '@/components/BasePanel/index.vue'
// import { useGlobalStore } from '@/store/global';
import config from '@/config'
import dayjs from 'dayjs'
import { ArrowDownBold } from '@element-plus/icons-vue'

// tab切换
const selectTab = ref('target')
const tabs = [
    { label: '目标', value: 'target' },
    { label: '任务', value: 'task' },
]

// 全局数据
// const globalStore = useGlobalStore()

// 选择的年份
const selectYear = ref(dayjs().year())

// 面板数据
const panelData = reactive({
    v1: '99.58',
    v1Unit: '%',
    v1Target: '88.7',
    v2: '100',
    v2Unit: '%',
    v2Target: '88.7',
})
</script>

<style lang="scss" scoped>
.header-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;

    .tabs-box {
        width: 120px;
    }
}

.el-select-no-border {
    :deep(.el-select__wrapper) {
        font-size: 20px !important;
    }
}

.panel-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;

    .label {
        font-size: 20px;
        font-weight: 700;
        line-height: 20px;
        color: rgba(255, 255, 255, 1);
        height: 20px;
    }

    .info-box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        .value-box {
            display: flex;
            align-items: flex-end;
            gap: 4px;

            .value {
                font-size: 28px;
                font-weight: 400;
                line-height: 28px;
                color: rgba(1, 254, 133, 1);
                height: 28px;
                font-family: Oswald;
            }
            .unit {
                font-size: 16px;
                font-weight: 700;
                line-height: 16px;
                height: 16px;
                color: rgba(255, 255, 255, 1);
            }
        }

        .value-box-2 {
            display: flex;
            align-items: center;
            gap: 4px;

            .title {
                font-size: 16px;
                font-weight: 500;
                height: 16px;
                line-height: 16px;
                color: rgba(255, 255, 255, 1);
            }
            .value {
                font-family: Oswald;
                font-size: 20px;
                font-weight: 400;
                line-height: 20px;
                height: 20px;
                color: rgba(0, 255, 115, 1);
            }
        }
    }
}
</style>
